<template>
  <jdScaleScreen>
    <dv-border-box-11
      title="智慧城市规划"
      :style="{ display: 'flex', padding: '80px 40px 20px 40px' }"
    >
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
      <el-row>
        <el-checkbox v-model="checked">备选项</el-checkbox>
        <el-date-picker
          :append-to-body="false"
          v-model="value1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
        <el-select
          :popper-append-to-body="false"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-row>
      <el-row>
        <div style="width: 400px; height: 200px">
          <dv-border-box-9></dv-border-box-9>
        </div>

        <div style="width: 500px; height: 400px">
          <dv-charts :option="option" />
        </div>
      </el-row>
      <el-row>
        <div style="width: 400px; height: 200px">
          <ChartComponent :options="chartOptions" :data="chartData" />
        </div>
        <el-button @click="updateData">更新数据</el-button>
      </el-row>
    </dv-border-box-11>
  </jdScaleScreen>
</template>
<script>
import jdScaleScreen from "@/components/jd-scale-screen";
import { Button, Select, Row, Option, Checkbox, DatePicker } from "element-ui";
import ChartComponent from "@/components/ChartComponent";
export default {
  name: "HomeIndex",
  components: {
    elButton: Button,
    elSelect: Select,
    elRow: Row,
    elOption: Option,
    elCheckbox: Checkbox,
    elDatePicker: DatePicker,
    ChartComponent,
    jdScaleScreen,
  },
  data() {
    return {
      checked: true,
      windowSizes: {
        width: window.innerWidth,
        height: window.innerHeight,
      },
      value1: "",
      scale: null,
      chartData: [120, 200, 150, 80, 70],
      chartOptions: {
        xAxis: { type: "category", data: ["A", "B", "C", "D", "E"] },
        yAxis: { type: "value" },
        series: [{ type: "bar" }],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      option: {
        title: {
          text: "剩余油量表",
          style: {
            fill: "#fff",
          },
        },
        series: [
          {
            type: "gauge",
            data: [{ name: "itemA", value: 55 }],
            center: ["50%", "55%"],
            axisLabel: {
              formatter: "{value}%",
              style: {
                fill: "#fff",
              },
            },
            axisTick: {
              style: {
                stroke: "#fff",
              },
            },
            animationCurve: "easeInOutBack",
          },
        ],
      },
    };
  },
  methods: {
    updateData() {
      this.chartData = this.chartData.map(() => Math.random() * 200);
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //     setTimeout(() => {
    //         const val = this.$refs['scale-screen']?.$el.children[0].style.transform
    //         this.scale = val
    //         document.documentElement.style.setProperty('--scale-transform', val);
    //     })
    // })
  },
};
</script>

<style lang="scss" scoped>
/* .el-popper {
        transform: var(--scale-transform);
        transition: transform 0s !important;
    } */
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
